<template>
	<view
        class="p-item"
        @click="showSelect = true"
    >
        <image
            lazy-load mode="aspectFill"
            class="img"  :src="item.mainImage"
        ></image>
        <view class="content-wrap">
            <text class="title">{{ item.description }}</text>

            <view class="price-wrap">
                <text class="price">{{ item.highestPrice }}</text>
                <text class="sold">销量{{ item.lowestPrice }}</text>
            </view>
        </view>
        <ProductInfoDialog
            :showSelect.sync="showSelect"
            :item="item"
            @close="showSelect = false"
        />
    </view>
</template>

<script>
import ProductInfoDialog from '@/components/ProductInfoDialog/index'

export default {
    props: {
        item: {
            type: Object,
            default () {
                return {}
            }
        },
    },
	components: {
		ProductInfoDialog,
	},
	data() {
		return {
            showSelect: false
        }
	},
	methods: {

        delItem: function(e) {

        },
	}
}
</script>

<style lang="stylus" scoped>
.p-item
    box-sizing border-box
    margin-left 15rpx
    flex 0 0 226rpx
    border-radius 16rpx
    overflow hidden
    background #fff

	.img
        width 100%
        height 220rpx
        background-size cover

    .title
        display block
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size 24rpx

    .content-wrap
        padding 12rpx

    .price-wrap
        display flex
        justify-content space-between

    .price
        font-size 28rpx

    .sold
        color #999
</style>
